<template>
  <view class="container">
    <!-- 导航栏 -->
    <uni-nav-bar 
      dark 
      :fixed="true" 
      shadow 
      status-bar 
      left-icon="arrow-left" 
      title="看板demo" 
      @clickLeft="back" 
    />
    
    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 表格容器 -->
      <view class="table-container" :style="{ height: tableHeight }">
        <view class="table-scroll-container">
          <view class="data-table">
            <!-- 表头：箭头上下纵向排列 -->
            <view class="table-header table-header-fixed">
              <!-- 全省排名列 -->
              <view class="table-cell cell-rank table-col-fixed-1" @click="handleSort('rank')">
                <view class="header-content">
                  <text>全省排名</text>
                  <view class="sort-icon-group">
                    <text class="sort-icon up-icon" 
                      :style="{color: sortConfig.key === 'rank' && sortConfig.type === 'asc' ? '#ff0101' : '#999'}">
                      ▲
                    </text>
                    <text class="sort-icon down-icon"
                      :style="{color: sortConfig.key === 'rank' && sortConfig.type === 'desc' ? '#ff0101' : '#999'}">
                      ▼
                    </text>
                  </view>
                </view>
              </view>
              
              <!-- 市州列 -->
              <view class="table-cell cell-city table-col-fixed-2" @click="handleSort('city')">
                <view class="header-content">
                  <text>市州</text>
                  <view class="sort-icon-group">
                    <text class="sort-icon up-icon" 
                      :style="{color: sortConfig.key === 'city' && sortConfig.type === 'asc' ? '#ff0101' : '#999'}">
                      ▲
                    </text>
                    <text class="sort-icon down-icon"
                      :style="{color: sortConfig.key === 'city' && sortConfig.type === 'desc' ? '#ff0101' : '#999'}">
                      ▼
                    </text>
                  </view>
                </view>
              </view>
              
              <!-- 新余额列 -->
              <view class="table-cell cell-data" @click="handleSort('newBalance')">
                <view class="header-content">
                  <text>新余额(亿)</text>
                  <view class="sort-icon-group">
                    <text class="sort-icon up-icon" 
                      :style="{color: sortConfig.key === 'newBalance' && sortConfig.type === 'asc' ? '#ff0101' : '#999'}">
                      ▲
                    </text>
                    <text class="sort-icon down-icon"
                      :style="{color: sortConfig.key === 'newBalance' && sortConfig.type === 'desc' ? '#ff0101' : '#999'}">
                      ▼
                    </text>
                  </view>
                </view>
              </view>
              
              <!-- 活期列 -->
              <view class="table-cell cell-data" @click="handleSort('currentDeposit')">
                <view class="header-content">
                  <text>活期(亿)</text>
                  <view class="sort-icon-group">
                    <text class="sort-icon up-icon" 
                      :style="{color: sortConfig.key === 'currentDeposit' && sortConfig.type === 'asc' ? '#ff0101' : '#999'}">
                      ▲
                    </text>
                    <text class="sort-icon down-icon"
                      :style="{color: sortConfig.key === 'currentDeposit' && sortConfig.type === 'desc' ? '#ff0101' : '#999'}">
                      ▼
                    </text>
                  </view>
                </view>
              </view>
              
              <!-- 非活期存款列 -->
              <view class="table-cell cell-data" @click="handleSort('nonCurrentDeposit')">
                <view class="header-content">
                  <text>非活期存款(亿)</text>
                  <view class="sort-icon-group">
                    <text class="sort-icon up-icon" 
                      :style="{color: sortConfig.key === 'nonCurrentDeposit' && sortConfig.type === 'asc' ? '#ff0101' : '#999'}">
                      ▲
                    </text>
                    <text class="sort-icon down-icon"
                      :style="{color: sortConfig.key === 'nonCurrentDeposit' && sortConfig.type === 'desc' ? '#ff0101' : '#999'}">
                      ▼
                    </text>
                  </view>
                </view>
              </view>
            </view>
            
            <!-- 表格内容区 -->
            <view class="table-body">
              <view 
                class="table-row" 
                v-for="(item, index) in sortedTableData" 
                :key="'data-' + index"
                :class="index % 2 === 0 ? 'row-even' : 'row-odd'"
              >
                <view class="table-cell cell-rank table-col-fixed-1">
                  <view class="rank-red-box">{{ item.rank }}</view>
                </view>
                <view class="table-cell cell-city table-col-fixed-2">{{ item.city }}</view>
                <view class="table-cell cell-data">{{ item.newBalance }}</view>
                <view class="table-cell cell-data">{{ item.currentDeposit }}</view>
                <view class="table-cell cell-data">{{ item.nonCurrentDeposit }}</view>
              </view>
              
              <!-- 空白填充行 -->
              <view 
                class="table-row empty-row" 
                v-for="index in emptyRowCount" 
                :key="'empty-' + index"
                :class="(sortedTableData.length + index) % 2 === 0 ? 'row-even' : 'row-odd'"
              >
                <view class="table-cell cell-rank table-col-fixed-1"></view>
                <view class="table-cell cell-city table-col-fixed-2"></view>
                <view class="table-cell cell-data"></view>
                <view class="table-cell cell-data"></view>
                <view class="table-cell cell-data"></view>
              </view>
              
              <!-- 合计行 -->
              <view class="table-row total-tr table-row-total">
                <view class="table-cell cell-rank table-col-fixed-1 total-fixed-col">合计</view>
                <view class="table-cell cell-city table-col-fixed-2 total-fixed-col"></view>
                <view class="table-cell cell-data">{{ total.newBalance }}</view>
                <view class="table-cell cell-data">{{ total.currentDeposit }}</view>
                <view class="table-cell cell-data">{{ total.nonCurrentDeposit }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 数据可视化模块：优化箭头位置和显示 -->
      <view class="visualization-wrapper">
        <view class="visualization-toggle" @click="handleVisualizationToggle">
          <!-- 文本和箭头顺序调整："化"字右侧显示箭头 -->
          <text class="visualization-text">数据可视化</text>
          <text class="visualization-icon" 
            :style="{transform: visualizationConfig.isOpen ? 'rotate(180deg)' : 'rotate(0)'}">
            ▲
          </text>
        </view>
        <view 
          class="visualization-content" 
          :style="{ height: visualizationConfig.isOpen ? visualizationConfig.height : '0' }"
        >
          <view class="chart-placeholder">
            <text>数据可视化图表区域</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import store from '../../common/store.js'
import utils from '../../common/utils'
export default {
  data() {
    return {
      tableData: [
        { rank: 1, city: '武汉', newBalance: -0.72, currentDeposit: -0.58, nonCurrentDeposit: -0.03 },
        { rank: 17, city: '黄冈', newBalance: -0.04, currentDeposit: 0.03, nonCurrentDeposit: -0.07 },
        { rank: 4, city: '襄阳', newBalance: -0.24, currentDeposit: -0.31, nonCurrentDeposit: 0.15 },
        { rank: 2, city: '荆州', newBalance: -0.04, currentDeposit: -0.12, nonCurrentDeposit: 0.11 },
        { rank: 11, city: '宜昌', newBalance: 0.07, currentDeposit: -0.15, nonCurrentDeposit: 0.25 },
        { rank: 6, city: '孝感', newBalance: -0.19, currentDeposit: -0.08, nonCurrentDeposit: -0.09 },
        { rank: 8, city: '咸宁', newBalance: -0.05, currentDeposit: -0.05, nonCurrentDeposit: 0.03 },
        { rank: 14, city: '十堰', newBalance: -0.06, currentDeposit: -0.04, nonCurrentDeposit: -0.02 },
        { rank: 15, city: '黄石', newBalance: 0, currentDeposit: 0, nonCurrentDeposit: -0.02 },
        { rank: 3, city: '荆门', newBalance: -0.18, currentDeposit: -0.24, nonCurrentDeposit: 0.13 },
        { rank: 10, city: '随州', newBalance: -0.18, currentDeposit: -0.13, nonCurrentDeposit: -0.02 },
        { rank: 16, city: '恩施', newBalance: -0.05, currentDeposit: -0.04, nonCurrentDeposit: 0.01 },
        { rank: 12, city: '鄂州', newBalance: -0.01, currentDeposit: -0.03, nonCurrentDeposit: 0.03 },
        { rank: 9, city: '仙桃', newBalance: -0.09, currentDeposit: -0.09, nonCurrentDeposit: 0.03 },
        { rank: 7, city: '天门', newBalance: -0.03, currentDeposit: -0.05, nonCurrentDeposit: 0.03 },
      ],
      total: { newBalance: -1.94, currentDeposit: -1.99, nonCurrentDeposit: 0.5 },
      sortConfig: {
        key: '',
        type: 'asc'
      },
      visualizationConfig: {
        isOpen: false,  // 默认关闭
        height: '300px'
      },
      minRowCount: 10,
      tableHeight: 'calc(100% - 50px)'
    };
  },
  computed: {
    sortedTableData() {
      const data = [...this.tableData];
      if (!this.sortConfig.key) return data;
      
      return data.sort((a, b) => {
        const valueA = a[this.sortConfig.key];
        const valueB = b[this.sortConfig.key];
        
        if (typeof valueA === 'number' && typeof valueB === 'number') {
          return this.sortConfig.type === 'asc' ? valueA - valueB : valueB - valueA;
        }
        
        if (typeof valueA === 'string' && typeof valueB === 'string') {
          const compare = valueA.localeCompare(valueB, 'zh-CN');
          return this.sortConfig.type === 'asc' ? compare : -compare;
        }
        
        return 0;
      });
    },
    emptyRowCount() {
      const need = this.minRowCount - this.sortedTableData.length;
      return need > 0 ? need : 0;
    }
  },
  onLoad() {
    this.calculateTableHeight();
    uni.onWindowResize(this.calculateTableHeight);
  },
  onUnload() {
    uni.offWindowResize(this.calculateTableHeight);
  },
  onShow() {
  	console.info("用户信息：" + JSON.stringify(this.userInfo));
  	this.initPage();
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    handleSort(key) {
      if (this.sortConfig.key === key) {
        this.sortConfig.type = this.sortConfig.type === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortConfig.key = key;
        this.sortConfig.type = 'asc';
      }
    },
    handleVisualizationToggle() {
      this.visualizationConfig.isOpen = !this.visualizationConfig.isOpen;
      this.calculateTableHeight();
    },
    calculateTableHeight() {
      const { windowHeight } = uni.getSystemInfoSync();
      const navHeight = 44;
      const toggleHeight = 50;
      const availableHeight = windowHeight - navHeight - toggleHeight;
      
      this.tableHeight = this.visualizationConfig.isOpen 
        ? `${availableHeight - parseInt(this.visualizationConfig.height)}px` 
        : `${availableHeight}px`;
    },
	// 初始化数据
	initPage: async function () {
	  this.$utils.showLoading("数据加载中...");
	  try {
	    const timestamp = this.$utils.getTimestamp();
	    const userInfo = uni.getStorageSync("userInfo");
	    // 加密请求数据（简化变量声明）
	    const enData = this.$utils.encrypt(
	      JSON.stringify({ timestamp }),
	      userInfo.aesKey,
	      userInfo.aesIv
	    );
	    // 发起请求
	    const res = await this.$myRequest.post_token(
	      getApp().globalData.khkbInit,
	      { data: enData + "" }
	    );
	    
	    this.$utils.hideLoading();
	    if (res.code === 200) {
	      // 解密数据
	      const a = JSON.parse(utils.decrypt(
	        res.data,
	        userInfo.aesKey,
	        userInfo.aesIv
	      ));
	      console.info("接口返回数据：" + JSON.stringify(a));
	      
	      
	    } else {
	      this.$utils.toast(`数据加载失败！错误码[${res.code}]`);
	    }
	  } catch (e) {  
	    this.$utils.hideLoading();
	    console.error("数据加载异常：", e);
	    this.$utils.toast("数据加载失败！" + e.message);           
	  }
	}
  }
};
</script>

<style scoped>
/* 箭头上下排列容器 */
.sort-icon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-left: 6px;
}

.sort-icon {
  font-size: 11px;
  line-height: 1;
  transition: color 0.2s ease;
  display: inline-block;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 数据可视化模块箭头样式优化 */
.visualization-toggle {
  width: 100%;
  padding: 0 12px;
  background-color: #ededed;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 50px;
}

/* 调整文本和箭头的顺序与间距 */
.visualization-text {
  font-size: 14px;
  color: #333;
  margin-right: 6px; /* 文本和箭头之间的间距 */
}

/* 可视化箭头样式：在"化"字右侧，点击旋转 */
.visualization-icon {
  font-size: 16px;
  color: #333;
  transition: transform 0.3s ease; /* 平滑旋转过渡 */
  line-height: 1;
}

/* 根容器样式 */
.container {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-container {
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: height 0.3s ease;
  overflow: hidden;
}

.table-scroll-container {
  flex: 1;
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  min-width: 800px;
  box-sizing: border-box;
}

.table-header {
  display: flex;
  background-color: #f8f8f8;
  color: #333;
  font-weight: 500;
  height: 48px;
}

.table-header-fixed {
  position: sticky;
  top: 0;
  z-index: 20;
}

.table-body {
  display: flex;
  flex-direction: column;
}

.table-row {
  display: flex;
  width: 100%;
  height: 48px;
}

.row-even {
  background-color: #ffffff;
}
.row-odd {
  background-color: #fee8ea;
}

.table-cell {
  padding: 0 8px;
  text-align: center;
  font-size: 14px;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}

.table-header .table-cell:active {
  background-color: #eaeaea;
}

.cell-rank { width: 100px; }
.cell-city { width: 120px; }
.cell-data { flex: 1; min-width: 120px; }

.table-cell:last-child {
  border-right: none;
}

.table-col-fixed-1 {
  position: sticky;
  left: 0;
  z-index: 10;
  background-color: #f8f8f8;
}
.table-col-fixed-2 {
  position: sticky;
  left: 100px;
  z-index: 10;
  background-color: #f8f8f8;
}

.row-even .table-col-fixed-1,
.row-even .table-col-fixed-2 {
  background-color: #ffffff;
}
.row-odd .table-col-fixed-1,
.row-odd .table-col-fixed-2 {
  background-color: #fee8ea;
}

.table-row-total {
  position: sticky;
  bottom: 0;
  z-index: 15;
}
.total-tr {
  background-color: #ff0101 !important;
  color: #fff !important;
  font-weight: bold;
}
.total-tr .table-cell {
  color: #fff !important;
  border-right: 1px solid rgba(255,255,255,0.3);
  border-bottom: none;
}
.total-fixed-col {
  background-color: #ff0101 !important;
  z-index: 16;
}

.empty-row .table-cell {
  background-color: transparent !important;
}

.visualization-wrapper {
  border-top: 1px solid #eee;
}

.visualization-content {
  width: 100%;
  overflow: hidden;
  transition: height 0.3s ease;
  box-sizing: border-box;
  background-color: #f9f9f9;
}
.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 14px;
}

.table-scroll-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.table-scroll-container::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

.rank-red-box {
  background-color: #ff0101;
  color: #ffffff;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-weight: 500;
}
</style>
    